<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQgrid用例</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/grid.locale-en.js"></script>
    <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/ui.jqgrid-bootstrap.css">
    <script>
    $.jgrid.defaults.width = 780;
    </script>
</head>
<body>
    <div id="userInfo">
        <!--展示页面-->
        <div v-show="list">
            <!--查询条件-->
            <div id="select">
                <div >
                    <a style="padding-left: 30px"><label>姓名</label><input type="text" v-model="name" /></a>

                    <a style="padding-left: 30px">
                        <label >创建时间</label>
                        <input type="date" v-model="startDate"
                               id="startDate" name="endDate"
                               placeholder="开始日期"/>

                        <input type="date"  v-model="endDate"
                               id="endDate" placeholder="结束日期" name="endDate"/>

                    </a>
                </div>
                <div class="btn-group " style="margin-left: 57px;margin-top: 10px">
                    <button type="button" class="btn btn-primary " @click="query">查询</button>
                    <button type="button" class="btn btn-primary " @click="add">新增</button>
                    <button type="button" class="btn btn-primary " @click="edit">编辑</button>
                    <button type="button" class="btn btn-primary " @click="del">删除</button>
                </div>
            </div>

            <!--分页表格-->
            <div style="margin-left: 20px;margin-top: 30px">
                <table id="jqGrid"></table>
                <div id="jqGridPager"></div>
            </div>



        </div>

        <!--添加页面-->
        <div v-show="addObj" style="vertical-align: middle;margin-left: 750px;margin-top: 200px">
            <label>添加数据</label>
            <p>昵称:<input v-model="addPra.nickName " type="text" placeholder="例如:小花花" style="padding-left: 10px"></p>
            <p>姓名:<input v-model="addPra.name " type="text" placeholder="例如:花木兰" style="padding-left: 10px"></p>
            <p>类型:<select v-model="addPra.cardType" style="padding-left: 10px">
                        <option value="0">类型1</option>
                        <option value="1">类型2</option>
                        <option value="2">类型3</option>
                     </select></p>
            <p>卡号:<input v-model="add.cardCode " type="text" placeholder="例如:4689452" style="padding-left: 10px"></p>
            <p class="btn-group " style="margin-left: 57px;margin-top: 10px">
                <button type="button" class="btn btn-primary " @click="addCal">取消</button>
                <button type="button" class="btn btn-primary " @click="addSub">确认</button>
                <button type="button" class="btn btn-primary " @click="addSub">返回</button>
            </p>
        </div>

    </div>
    <script type="text/javascript" src="js/demo/jqDemo.js"></script>
    <script src="js/vue.min.js"></script>
</body>
</html>